﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CardMidQuery.aspx.cs" Inherits="QualityRPT.CardMidQuery" %>
<%@ Register TagPrefix="uc1" TagName="clheader" Src="include/cl_header.ascx" %>
<%@ Register TagPrefix="uc1" TagName="cltop" Src="include/cl_top.ascx" %>
<%@ Register TagPrefix="uc1" TagName="clleft" Src="include/cl_left.ascx" %>
<%@ Register TagPrefix="uc1" TagName="clfooter" Src="include/cl_footer.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>ETC产品质量跟踪统计系统-IC卡汇总统计</title>
    <uc1:clheader id="clheader" runat="server"/>
</head>
<body>
  <uc1:cltop id="cltop" runat="server"/>
  <div class="container-fluid">
    <div class="row-fluid">
        <uc1:clleft id="clleft" runat="server"/>
         <!-- this is content start-->
        <form id="Form1" runat="server">
         <div class="box span10">
			<div class="box-header well">
				<h2><i class="icon-th"></i>IC卡汇总统计条件</h2>
			</div>
            <div class="box-content" style=" float:left">
                <a id="mul_sel_ck" href="#">点击查看已选择的查询条件</a>
                <div class="success mul_hide" id="mulsel_callback"></div>
                <input type="hidden" id="h_dev" runat="server" />
                <div style="clear: both; height: 12px;"></div>
                <asp:Label ID="Label1" runat="server" Text="起始时间："></asp:Label>
                <asp:TextBox ID="textBoxStart" runat="server" class="datetimepicker"></asp:TextBox>
                <asp:Label ID="Label2" runat="server" Text="结束时间："></asp:Label>
                <asp:TextBox ID="textBoxEnd" runat="server" class="datetimepicker"></asp:TextBox>
                <span>分组选择:</span>
                <select id="sel_statTType" runat="server">
                   <option value="0">无选择</option>
                    <option value="1">按月</option>
                    <option value="2">按周</option>
                    <option value="3">按日</option>
                </select>
                <div style="clear:both;height:12px;"></div>
                <asp:Label ID="Label3" runat="server" Text="生产厂家："></asp:Label>
                <select id="ajax_spin" multiple="true" class="mulselect" runat="server"></select>
                <asp:Label ID="Label4" runat="server" Text="产品型号："></asp:Label>
                <select id="ajax_scin" multiple="true" class="mulselect" runat="server"></select>
                <asp:Label ID="Label5" runat="server" Text="合同编号："></asp:Label>
                <select id="ajax_cnin" multiple="true" class="mulselect" runat="server"></select>
                <div style="clear:both;height:12px;"></div>
                <asp:Label ID="Label6" runat="server" Text="经过路段："></asp:Label>
                <select id="ajax_rdin" multiple="true" class="mulselect" runat="server"></select>
                <asp:Label ID="Label7" runat="server" Text="经过广场："></asp:Label>
                <select id="ajax_plazain" multiple="true" class="mulselect" runat="server"></select>
                <asp:Label ID="Label8" runat="server" Text="经过车道："></asp:Label>
                <select id="ajax_lanein" multiple="true" class="mulselect" runat="server"></select>
                <div style="clear:both;height:12px;"></div>
                <asp:Button ID="ButtonQ" runat="server" Text="查询" CssClass="botton" onclick="ButtonQ_Click" />
                <asp:Button ID="ButtonExport" runat="server" Text="导出" CssClass="botton" onclick="ButtonExport_Click" />
                <div style="clear:both;height:12px;"></div>
            </div>
         </div>
         </form>
         <div class="box span10">
					<div class="box-header well">
						<h2><i class="icon-th"></i>IC卡汇总统计-<span id="span_t_consume" runat="server"></span></h2>
					</div>
					<div class="box-content">
						<ul class="nav nav-tabs" id="myTab">
							<li class="active"><a href="#exSpec">统计结果</a></li>
                            <li><a href="#dataAnaly">分析</a></li>
						</ul>
						<div id="myTabContent" class="tab-content">
							<div class="tab-pane active" id="exSpec">
								<table class="table table-bordered bootstrap-datatable datatable">
						            <thead>
							          <tr>
                                          <asp:Repeater ID="repeater_title" runat="server">
                                              <ItemTemplate>
                                               <th><%# GetDataItem()%></th>
                                              </ItemTemplate>
                                          </asp:Repeater>
                                          <th>交易量</th>
                                          <th>一次通过量</th>
                                          <th>设备成功量</th>
                                          <th>设备异常量</th>
                                          <th>逻辑异常量</th>
                                          <th>一次通过率</th>
                                          <th>设备成功率</th>
                                          <th>设备异常率</th>
                                          <th>逻辑异常率</th>
							          </tr>
						          </thead>   
						            <tbody>
                                        <asp:Repeater ID="repeater_data" runat="server">
                                            <ItemTemplate>
                                                <tr>
                                                    <%#GetAutoColumns(Container.ItemIndex) %>
                                                    <td><%# DataBinder.Eval(Container.DataItem, "TRANSCOUNT")%></td>
                                                    <td><%# DataBinder.Eval(Container.DataItem, "ONEPASS_TRANSCOUNT")%></td>
                                                    <td><%# DataBinder.Eval(Container.DataItem, "DEVSUC_TRANSCOUNT")%></td>
                                                    <td><%# DataBinder.Eval(Container.DataItem, "DEVEX_TRANSCOUNT")%></td>
                                                    <td><%# DataBinder.Eval(Container.DataItem, "LEX_TRANSCOUNT")%></td>
                                                    <td><%# QualityRpt.Utils.StringUtils.FormatRatio(DataBinder.Eval(Container.DataItem, "ONEPASS_RATE"))%>%</td>
                                                    <td><%# QualityRpt.Utils.StringUtils.FormatRatio(DataBinder.Eval(Container.DataItem, "DEVSUC_RATE"))%>%</td>
                                                    <td><%# QualityRpt.Utils.StringUtils.FormatRatio(DataBinder.Eval(Container.DataItem, "DEVEX_RATE"))%>%</td>
                                                    <td><%# QualityRpt.Utils.StringUtils.FormatRatio(DataBinder.Eval(Container.DataItem, "LEX_RATE"))%>%</td>
                                                </tr>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </tbody>
                                </table>
							</div>
                            <div class="tab-pane" id="dataAnaly">
							    <!--一次通过率分析-->
							     <div id="canvas_onepass"  style="min-width: 950px; height: 500px; margin: 0 auto"></div>
                                 <!--设备成功率分析-->
                                 <div id="canvas_devsuc"  style="min-width: 950px; height: 500px; margin: 0 auto"></div>
                                 <!--设备异常率分析-->
                                 <div id="canvas_devex"  style="min-width: 950px; height: 500px; margin: 0 auto"></div>
                                 <!--逻辑异常率分析-->
                                 <div id="canvas_lex"  style="min-width: 950px; height: 500px; margin: 0 auto"></div>
                                 <!--漏读交易率分析-->
                                 <div id="canvas_unread"  style="min-width: 950px; height: 500px; margin: 0 auto"></div>
							</div>
					    </div>
					</div>
					</div>
          </div>		
         <!-- content end-->
    </div>
  <uc1:clfooter id="clfooter" runat="server"/>
  <div>
<script type="text/javascript">
 /**
 * Grid theme for Highcharts JS
 * @author Torstein Honsi
 */
Highcharts.theme = {
	colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
	chart: {
		backgroundColor: {
			linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
			stops: [
				[0, 'rgb(255, 255, 255)'],
				[1, 'rgb(240, 240, 255)']
			]
		},
		borderWidth: 2,
		plotBackgroundColor: 'rgba(255, 255, 255, .9)',
		plotShadow: true,
		plotBorderWidth: 1
	},
	title: {
		style: {
			color: '#000',
			font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
		}
	},
	subtitle: {
		style: {
			color: '#666666',
			font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
		}
	},
	xAxis: {
		gridLineWidth: 1,
		lineColor: '#000',
		tickColor: '#000',
		labels: {
			style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			}
		},
		title: {
			style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'

			}
		}
	},
	yAxis: {
		minorTickInterval: 'auto',
		lineColor: '#000',
		lineWidth: 1,
		tickWidth: 1,
		tickColor: '#000',
		labels: {
			style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			}
		},
		title: {
			style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
			}
		}
	},
	legend: {
		itemStyle: {
			font: '9pt Trebuchet MS, Verdana, sans-serif',
			color: 'black'

		},
		itemHoverStyle: {
			color: '#039'
		},
		itemHiddenStyle: {
			color: 'gray'
		}
	},
	labels: {
		style: {
			color: '#99b'
		}
	},

	navigation: {
		buttonOptions: {
			theme: {
				stroke: '#CCCCCC'
			}
		}
	}
};
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
// show graph
$(function () {
    $('#canvas_onepass').highcharts({
        chart: {
            type: '<%=GOnePassChartType %>',
            margin: [ 50, 50, 100, 80]
        },
        title: {
            text: '一次通过率'
        },
        subtitle: {
            text: 'ETC产品质量跟踪系统'
        },
        xAxis: {
            categories: [
                <%=GCategories %>
            ],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '一次通过比例'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: false
                },
                enableMouseTracking: false
            }
        },
        tooltip: {
            pointFormat: '一次通过比例<b>{point.y:.2f}%</b>',
        },
        exporting: {
            enabled: false
        },
        series: [
            <%=GOnePassDatas %>
        ]
    });
    //设备成功率
    $('#canvas_devsuc').highcharts({
        chart: {
            type: '<%=GDevSucChartType %>',
            margin: [ 50, 50, 100, 80]
        },
        title: {
            text: '设备成功率'
        },
        subtitle: {
            text: 'ETC产品质量跟踪系统'
        },
        xAxis: {
            categories: [
                <%=GCategories %>
            ],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '设备成功比例'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: false
                },
                enableMouseTracking: false
            }
        },
        tooltip: {
            pointFormat: '设备成功比例<b>{point.y:.2f}%</b>',
        },
        exporting: {
            enabled: false
        },
        series: [
            <%=GDevSucDatas %>
        ]
    });
    //设备异常率
    $('#canvas_devex').highcharts({
        chart: {
            type: '<%=GDevExChartType %>',
            margin: [ 50, 50, 100, 80]
        },
        title: {
            text: '设备异常率'
        },
        subtitle: {
            text: 'ETC产品质量跟踪系统'
        },
        xAxis: {
            categories: [
                <%=GCategories %>
            ],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '设备异常比例'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: false
                },
                enableMouseTracking: false
            }
        },
        tooltip: {
            pointFormat: '设备异常比例<b>{point.y:.2f}%</b>',
        },
        exporting: {
            enabled: false
        },
        series: [
            <%=GDevExDatas %>
        ]
    });
    //逻辑异常率
    $('#canvas_lex').highcharts({
        chart: {
            type: '<%=GLExChartType %>',
            margin: [ 50, 50, 100, 80]
        },
        title: {
            text: '逻辑异常率'
        },
        subtitle: {
            text: 'ETC产品质量跟踪系统'
        },
        xAxis: {
            categories: [
                <%=GCategories %>
            ],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '逻辑异常比例'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: false
                },
                enableMouseTracking: false
            }
        },
        tooltip: {
            pointFormat: '逻辑异常比例<b>{point.y:.2f}%</b>',
        },
        exporting: {
            enabled: false
        },
        series: [
            <%=GLExDatas %>
        ]
    });
});
</script>
  </div>
</body>
</html>
